<template>
  <el-dialog title="备料库存明细" width="1000" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <div class="grid grid-cols-3 py-[6px]">
        <VText v-for="item in infoColumns" :key="item.value" :title="item.label" :value="info[item.field]" line="1" />
      </div>
      <vxe-grid v-bind="orderOptions" ref="tableRef" />
    </div>
    <template #footer>
      <el-button type="primary" @click="handleClose"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { computed, nextTick, watch } from "vue"

const props = defineProps({})
const modelValue = ref(false)

import { demandList } from "../api.js"

const infoRef = ref()
const productRef = ref()

const info = ref({})
const infoColumns = [
  { label: "SKU", field: "sku" },
  { label: "自定义SKU", field: "custom_sku" },
]
const tableRef = ref()

const orderTableData = ref([])
const orderOptions = reactive({
  border: true,
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10,
    pageSizes: [5, 10, 15, 20, 50, 100],
  },
  columns: [
    {
      field: "type",
      title: "类型",
      slots: {
        default: ({ row }) => <div>{row.type == 1 ? "备料计划" : "备库需求单"}</div>,
      },
    },
    { field: "order_no", title: "单据", width: "180" },
    {
      field: "create_time",
      title: "添加时间",
      width: "180",
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row.create_time} line={1} />
            <VText value={row.expect_order_time} line={1} />
          </div>
        ),
      },
    },
    { field: "deliver_time", title: "预计交期" },
    { field: "num", title: "数量" },
    { field: "leave_num", title: "余料数量" },
    { field: "status_name", title: "状态" },
    // {
    //   field: "fba",
    //   title: "变更数量",
    // slots: {
    //   default: ({ row }) => <VText value={row.xxx} line={1} />,
    // },
    // },
    // { field: "address", title: "剩余数量" },
    // { field: "address", title: "更新时间" },
  ],
  proxyConfig: {
    // autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: async ({ page, form }) => {
        let params = {
          pageSize: page.pageSize,
          pageNum: page.currentPage,
          ...formData.value,
        }
        let res = await demandList(params)
        return res
      },
    },
  },
})

const handleClose = () => {
  modelValue.value = false
  orderOptions.data = []
}
const formData = ref({})
const open = (row) => {
  modelValue.value = true
  formData.value = {
    sku: [row.sku],
    asin: [row.asin],
    sale_id: [row.operator_user],
    country: [row.site_code],
  }
  info.value = {
    sku: row.sku,
    custom_sku: row.custom_sku,
  }
  nextTick(() => {
    tableRef?.value.commitProxy("query")
  })
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.vxe-table--tooltip-wrapper {
  z-index: 10000 !important;
}
</style>
